<template>
  <el-table
    :data="props.issuesTableData"
    :show-header="false"
    v-loading="props.loading"
    row-key="id"
    @row-click="handleNodeClick"
  >
    <el-table-column :show-overflow-tooltip="true">
      <template #default="{ row }">
        <div class="issues-warp">
          <span class="issues-title"> {{ row.title }}</span>
          <el-tag
            v-if="+row.top_id !== 0"
            class="opt-top"
            effect="plain"
            :style="{
                  background: getOptColor(row.top_id as string),
                  borderColor: getOptColor(row.top_id as string)
                   }"
            ><span>{{ '置顶' }}</span></el-tag
          >
          <el-tag
            v-if="row.priority !== '不指定'"
            class="opt-priority"
            :style="{
              color: getPriorityColor(row.priority),
              borderColor: getPriorityColor(row.priority)
            }"
            effect="plain"
          >
            <span>{{ row.priority }}</span></el-tag
          >
        </div>
        <div class="issues-footer">
          <div class="wrap-left">
            <div class="comment">
              <i class="iconfont iconpinglun"></i>
              <!-- <span>{{ row.comment.length !== 0 ? row.comment.length : '' }}</span> -->
            </div>
            <div class="issues-person">
              <i class="iconfont icon-gerenzhongxin"></i>
              <span>{{ row.user_name }}</span>
            </div>
            <div
              class="opt-tags"
              v-for="item in row?.issues_tags"
              :key="row.id"
              :style="{
                color: getTagsColor(item)
              }"
            >
              <i class="iconfont icon-biaoqian" style="font-size: 16px"></i>
              <span>{{ item }}</span>
            </div>
          </div>
          <p>{{ row.created_at }}</p>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, PropType } from 'vue'
import { useRouter } from 'vue-router'

// import { Issues } from '@/views/issues/config/issues'
import { store } from '@/store/issues'
import { storeToRefs } from 'pinia'
import { IProblems } from '../config/problems'

const props = defineProps({
  issuesTableData: {
    type: Object as PropType<IProblems>,
    default: () => {}
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const issueStore = store()
const { tagsData } = storeToRefs(issueStore)

/**
 * @desc: 获取标签
 */
onMounted(async () => {
  await issueStore.getTagsData(), issueStore.getData()
})

const optTagsColor = (res: string) => {
  const findTags = tagsData.value.find((item: { label: string }) => {
    return item.label === res
  })
  return findTags?.tags_color
}

const getTagsColor = (res: string) => {
  return optTagsColor(res)
}

/**
 * @desc: 获取置顶项
 */
const optIdColor: { [key: string]: string } = {
  '1': '#95d475',
}
const getOptColor = (res: string) => {
  return optIdColor[res]
}

const optPriorityColor: { [key: string]: string } = {
  不指定: '#B0B0B0',
  严重: '#ff7800',
  主要: '#FF8F00',
  次要: '#008AFF',
  不重要: '#73E06F'
}
const getPriorityColor = (res: string) => {
  return optPriorityColor[res]
}

/**
 * @desc: 详情页面
 */
const $router = useRouter()
const handleNodeClick = (item: any) => {
  $router.push({
    name: 'Detail',
    query: { id: item.id }
  })
}
</script>

<style lang="less" scoped>
.el-table{
  flex-grow: 1;
  height: 0;
  flex-shrink: 0;
  overflow-y: auto;
}
.issues-warp {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  .opt-top,
  .opt-priority {
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    padding: 8px;
    margin-left: 18px;
  }
  .opt-top {
    span {
      color: #ffffff;
    }
  }
}

:deep(.el-table__row) {
  height: 50px;
  .issues-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .wrap-left {
      display: flex;
      align-items: center;
      .comment {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding-right: 8px;
        transform: translateY(1px);
        .iconpinglun {
          font-size: 18px;
          padding-right: 3px;
        }
      }

      .issues-person {
        display: flex;
        align-items: center;
        cursor: pointer;
        .icon-gerenzhongxin {
          padding-right: 5px;
          font-size: 18px;
        }
      }
      .opt-tags {
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-left: 18px;
        .icon-biaoqian {
          transform: translateY(2px);
          padding-right: 5px;
        }
      }
    }
  }
}
:deep(.el-popper.is-dark) {
  max-width: 300px;
}
</style>
